<template>
  <div>
    <transition name="el-fade-in-linear" mode="out-in">
      <div>
        <div v-for="(item, index) in dialogList" :key="index">
          <el-dialog
            v-show="item.show"
            :title="item.title"
            :width="item.width"
            v-model="item.visible"
            :modal="false"
            :z-index="1000"
            :close-on-click-modal="false"
            @close="() => closeDialog(item, index, '', true)"
          >
            <component
              :is="item.component"
              v-bind="item.props"
              @close="(...args:any) => closeDialog(item, index, args)"
            />
          </el-dialog>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { dialogList, closeDialog, init } from "./index"
import { useRouter } from "vue-router"
import { watch } from "vue"
const router = useRouter()
watch(
  () => router.currentRoute.value.path,
  (val, old) => {
    dialogList.forEach((item) => {
      console.log(old, "item", item.pathKey)
      if (item.pathKey == old) {
        item.show = false
      } else {
        item.show = true
      }
    })
    console.log(val, old)
  }
)
init(router)
</script>

<style></style>
